<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>


</body>

<script>
    var a = document.getElementsByTagName("li");
    for(var i = 0; i < a.length; i++) {
        var color;
        //为遍历到的tr添加鼠标移入事件  事件发送,函数作为响应  .  新建变量记录原来背景色
        a[i].onmouseover = function() {
            //事件发送,调用匿名函数,循环已经结束,变量i已经死亡
            //this[i]是行标签,DOM是标签对象
            color = this.style.backgroundColor;
            this.style.backgroundColor = "#FF0000";
        }

        //为tr行添加鼠标离开事件
        a[i].onmouseout = function() {
            //本行的背景色还原
            this.style.backgroundColor = color;
        }
    }
</script>

</html>